<script setup>
import {ref, reactive,onMounted,computed} from 'vue'
import api from '../api'
import { useRouter } from 'vue-router';

const router = useRouter()

let articleList = reactive({
    article:[], // 博客
    labels:{},  // 分类
    tags:{},  // 标签
    pageSizes: [10, 20, 30, 40] // 分页
})

// 数据总量
const total = ref(100)
// 每页展示数据量
let page_size = ref(10)
// 当前页
let currentPage = ref(1)

// 每页展示数量改变时触发
const handleSizeChange = (val) => {
  // console.log(articleList.article.slice(val-1,page_size.value));
  page_size.value = val
  
}
// 翻页时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  // console.log(articleList.article.slice((val-1)*page_size.value,val*page_size.value));
}

// 计算当前展示条目
const setPage = computed(() => {
  // 当前页-1 * 每页条目数 , 当前页 * 每页条目数
  return articleList.article.slice((currentPage.value-1)*page_size.value, currentPage.value*page_size.value)
})

// tag随机颜色
function randColor() {
      return (
        "rgb(" +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        ")"
      );
    }
    // `/details/${id}`
// 根据点击的titleid跳转到详情页
const toDetails = (id) => {
    router.push({
        path: `/details/${id}`,
        query: id
    })
}

// 页面挂载时获取数据
onMounted(() => {
    api.get_article().then(data => {
        articleList.article = data.article
        articleList.labels = data.label
        articleList.tags = data.tag

        total.value = data.article.length
        // console.log(data.article.slice(0,5));
    })
})
</script>

<template>
  <div class="article">
    
    <el-row  justify="center" :gutter="20">
        <!-- 左侧帖子 -->
        <el-col :span="12">
            <el-card 
            shadow="never"
            v-for="item in setPage"
            ::key="item.id"
            @click="toDetails(item.id)"
            > 
            <div class="title">
              {{ item.id }}
                <span>{{ item.title }}</span>
            </div>
            <div class="user">
                <span><el-icon><UserFilled /></el-icon>{{ item.author }}</span>
                <span><el-icon><Clock /></el-icon>{{ item.date }}</span>
                <span><el-icon><Discount /></el-icon>{{ item.label }}</span>
            </div>
        </el-card>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="page_size"
                layout="sizes,prev,pager, next, jumper"
                :page-sizes="articleList.pageSizes"
                :pager-count="9"
                :total="100"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        </el-col>
        <!-- 右侧导航 -->
        <el-col :span="4">
        <el-card class="box-card">
          <div class="header">
            <div><img src="../assets/user.jpeg" /></div>
            <div class="name">Hello欧</div>
            <div class="info">
              <el-row type="flex" justify="center">
                <el-col :span="8" class="info-left">
                  <div class="count">{{total}}</div>
                  <div class="desc">Article</div>
                </el-col>
                <el-col :span="4">
                  <div class="count">{{articleList.tags.length}}</div>
                  <div class="desc">Tag</div>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 分类 -->
          <div class="body">
            <div class="body-title">
                <el-icon><Operation /></el-icon>Category
            </div>
            <div class="body-content">
              <div
                class="body-card"
                v-for="item in articleList.labels"
                :key="item.id"
              >
                <el-row  justify="space-between">
                  <el-col :span="12">
                    <div class="category">{{ item.title }}</div>
                  </el-col>
                  <el-col :span="1">
                    <div
                      class="count"
                      :style="{ backgroundColor: randColor() }"
                    >
                      {{ item.count }}
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 标签 -->
          <div class="tag">
            <div class="tag-title"><el-icon><Discount /></el-icon>Tag</div>
            <div class="tag-content">
              <el-tag
                :style="{ backgroundColor: randColor() }"
                v-for="item in articleList.tags"
                :key="item.id"
              >
                {{ item.tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    
  </el-row>
  </div>
</template>

<style lang="less" scoped>
.article{
    width: 99%;
}
.el-card{
    margin-bottom: 10px;
    box-shadow: 0 4px 8px 6px rgb(7 17 27 / 6%);
    transition: all .3s;
    cursor: pointer;
    .title{
        margin: 10px 0;
        font-size: 20px;
        span{
            position: relative;
            padding-bottom: 5px;
            // border-bottom: 2px solid #84AF9B;
        }
        span:hover {
            color: #84AF9B;
        }
        span::after{
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: #84AF9B;
            transition: all 0.7s;
        }
        span:hover::after{
            left: 0;
            width: 100%;
        }
    }
    .user{
        display: flex;
        flex-wrap: nowrap;
        margin-top: 20px;
        span{
            margin-right: 50px;
            color: #999;
            .el-icon{
                margin-right: 6px;
                vertical-align: middle;
            }
        }
        span:hover {
            color: #84AF9B;
        }
    }
}
.el-card:hover{
    box-shadow: 0 4px 12px 12px rgb(7 17 27 / 15%);
}
.header{
    text-align: center;
    img{
        width: 120px;
        height: 120px;
        border-radius: 100%;
    }
    .name{
        margin: 10px 0;
    }
    .count{
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .desc {
        font-size: 11px;
    }
    .info-left{
        margin-right: 15px;
        border-right: 1px solid #ccc;
    }
}
.body-title {
    color: #000;
    .el-icon{
        vertical-align: middle;
        margin-right: 4px;
    }
}
.body-content{
    margin-top: 25px;
    .body-card{
        padding: 12px 20px;
        box-shadow: 0 2px 10px 1px #ccc;
        margin: 10px 0px;
        border-radius: 5px;
        .category{
            font-size: 14px;
        }
        .el-col-1{
            margin-right: 5px;
        }
        .count{
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 3px;
            font-weight: bold;
            font-size: 11px;
            color: white;
            text-align: center;
        }
    }
    .body-card:hover {
        transform: scale(1.02);
        color: #84AF9B;
        font-weight: bold;
}
}
.tag{
    .el-icon{
        vertical-align: middle;
    }
    .tag-content {
        margin-top: 20px;
        .el-tag {
            margin: 5px;
            font-size: 10px;
            color: white;
            height: 25px;
            line-height: 25px;
            border: 0;
        }
        .el-tag:hover {
            transform: scale(1.1);
            transition: all 0.3s;
        }
    }
}

.page {
    display: flex;
    margin: 30px;
    justify-content: center;
}
</style>
